<template>
	<view class="myslider">
		
		<view class="arrow left-arrow" v-if="showArrow" @click="prevSlide">
		  <image src="/static/index/left-arrow.svg" class="arrow-icon" />
		</view>
				
		<uni-swiper-dot :info="banners" :current="current" :dots-styles="dotsStylesComputed"  :mode="mode" @clickItem="clickItem">
			<swiper class="swiper"  :style="{height: height + 'rpx'}"
			:current="swiperDotIndex" :autoplay="false" interval="3000" duration="500" circular="true" @change="change">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<image :src="getImgUrl(item)" class="swiper-image" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view class="arrow right-arrow" v-if="showArrow"  @click="nextSlide">
		   <image src="/static/index/right-arrow.svg" class="arrow-icon" />
		 </view>
		 
	</view>
</template>

<script>
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	export default {
		name:"myslider",
		props: {
		height: {
		   type: Number,
		    default: 440,	   
		},
		 banners: {
			 type: Array,
			 default: [
				    '',
					'',
					''],
		   },
		   showArrow: {
			  type: Boolean,
			  default: true
		   },
		   showDots: {
		   			  type: Boolean,
		   			  default: true
		   },
		   dotsStyles: {
			 type: Object,
			 default: {
				 backgroundColor: 'rgba(0, 0, 0, .3)',
				 border: '1px rgba(0, 0, 0, .3) solid',
				 color: '#fff',
				 selectedBackgroundColor: 'white',
				 selectedBorder: '1px white solid',
			 }  
		   }
		},
		data() {
			return {
				imgPrex,
				current: 0,
				mode: 'default',
				swiperDotIndex: 0,
			};
		},
		computed: {
		  // 如果不想显示dots 就设置成透明化
		  dotsStylesComputed () {
			  if (this.showDots) return this.dotsStyles
			  return {
				 backgroundColor: 'transparent',
				 border: 'transparent',
				 color: 'transparent',
				 selectedBackgroundColor: 'transparent',
				 selectedBorder: 'transparent',
			 }  
		  }	
		},
		methods: {
			getImgUrl (url) {
				if(url && url.indexOf('http') > -1) return url;
				return this.imgPrex + url
			},
		  change(e) {
		  	this.current = e.detail.current;
		  },
		  clickItem(e) {
		     this.swiperDotIndex = e
		  },
			prevSlide() {
			  if (this.current === 0) {
				this.current = this.banners.length - 1;
			  } else {
				this.current -= 1;
			  }
			  this.swiperDotIndex = this.current
			},
			nextSlide() {
			  if (this.current === this.banners.length - 1) {
				this.current = 0;
			  } else {
				this.current += 1;
			  }
			  this.swiperDotIndex = this.current
			},
		}
	}
</script>

<style lang="scss">
  .myslider {
	position: relative;
	text-align: center;
	.swiper {
		width: 520rpx;
		margin: 0 auto;
        padding-bottom: 40rpx;
		position: relative;
		.swiper-image {
			width: 100%;
			height: 100%;
			// border-radius: 10px;
		}
	}
  
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      // background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      user-select: none;
      z-index: 10;
    }
    
    .left-arrow {
      left: 10rpx;
    }
    
    .right-arrow {
      right: 10rpx;
    }
	.arrow-icon {
		width: 100rpx;
	}
  }
</style>